<template>
  <div>
    <div id='formio'></div>
  </div>
</template>

<script setup lang="ts">
import { Formio } from 'formiojs';
import 'formiojs/dist/formio.form.min.css'
import { onMounted } from "vue";
import wizard from "./wizard.json"

onMounted(() => {
  const ele = document.getElementById('formio')
  if (ele) {
    Formio.createForm(document.getElementById('formio'), {
      components: [
        {
          label: 'Children',
          key: 'children',
          type: 'datagrid',
          input: true,
          validate: {
            minLength: 3,
            maxLength: 6
          },
          components: [
            {
              label: '姓',
              key: 'firstName',
              type: 'textfield',
              input: true
            },
            {
              label: '名',
              key: 'lastName',
              type: 'textfield',
              input: true
            },
            {
              label: '性别',
              key: 'gender',
              type: 'select',
              input: true,
              data: {
                values: [
                  {
                    value: 'male',
                    label: 'Male'
                  },
                  {
                    value: 'female',
                    label: 'Female'
                  },
                  {
                    value: 'other',
                    label: 'Other'
                  }
                ]
              },
              dataSrc: 'values',
              template: '<span>{{ item.label }}</span>'
            },
            {
              type: 'checkbox',
              label: '依赖项',
              key: 'dependant',
              inputType: 'checkbox',
              input: true
            },
            {
              label: '生日',
              key: 'birthdate',
              type: 'datetime',
              input: true,
              format: 'yyyy-MM-dd hh:mm a',
              enableDate: true,
              enableTime: true,
              defaultDate: '',
              datepickerMode: 'day',
              datePicker: {
                showWeeks: true,
                startingDay: 0,
                initDate: '',
                minMode: 'day',
                maxMode: 'year',
                yearRows: 4,
                yearColumns: 5,
                datepickerMode: 'day'
              },
              timePicker: {
                hourStep: 1,
                minuteStep: 1,
                showMeridian: true,
                readonlyInput: false,
                mousewheel: true,
                arrowkeys: true
              },
              "conditional": {
                "eq": "true",
                "when": "dependant",
                "show": "true"
              }
            }
          ]
        }
      ]
    }, {}).then(form => {
      form.submission = {
        data: {
          children: [
            {
              firstName: 'Joe',
              lastName: 'Smith',
              gender: 'male',
              dependant: true,
              birthdate: '1982-05-18'
            },
            {
              firstName: 'Mary',
              lastName: 'Smith',
              gender: 'female',
              dependant: false,
              birthdate: '1979-02-17'
            }
          ]
        }
      };
      form.on("submit", (submission: any) => {
        console.log(submission)
      })
    });
  }
})
</script>

<style scoped>
#formio {
  padding: 20px;
}
</style>